<template>
  <v-chart
    ref="flowChartRef"
    class="chart"
    :option="option" />
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: 'flowChart',
  components: {
    VChart
  },
  props: {
    xData: { // x 轴
      type: Array,
      default: () =>[]
    },
    yData: { // y 轴
      type: Array,
      default: () =>[]
    },
    legendData: { // 图例
      type: Array,
      default: () =>[]
    },
    seriesData: { // 数据
      type: Array,
      default: () =>[]
    }
  },
  data() {
    return {
      option: {
        color: [ '#016BFF' ],
        title: {
          show: false
        },
        grid: {
          top: 10,
          left: 50,
          right: 30,
          bottom: 40
        },
        tooltip: {
          z: 0,
          trigger: "axis",
          borderWidth: 0,
          backgroundColor: 'rgba(0,0,0,0.7)',
          textStyle: {
            color: '#FFFFFF'
          },
          axisPointer: {
            lineStyle: {
              type: 'solid',
              width: 2,
              color: '#000000'
            }
          }
        },
        legend: {
          show: false
        },
        xAxis: {
          z: 1,
          type: 'category',
          splitNumber: 6,
          axisLine: {
            lineStyle: {
              color: '#D8D8D8'
            }
          },
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#D8D8D8'
            }
          },
          axisLabel: {
            color: '#000000'
          },
          splitLine: {
            lineStyle: {
              color: '#E6E6E6'
            }
          },
          data: this.xData
        },
        yAxis: {
          type: 'value',
          scale: true,
          axisLabel: {
            color: '#000000'
          },
        },
        series: [
          {
            name: this.legendData[0],
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            lineStyle: {
              width: 2
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#FFFFFF',
            },
            emphasis: {
              scale: false,
              lineStyle: {
                width: 2
              },
            },
            zlevel: 2,
            z: 2,
            data: this.seriesData[0]
          }
        ]
      }
    };
  },
  watch: {
    xData: {
      handler(val, oldVal){
        this.$refs.flowChartRef.setOption({
          xAxis: {
            data: val
          }
        })
      },
      deep:true //true 深度监听
    },
    seriesData: {
      handler(val, oldVal){
        this.$refs.flowChartRef.setOption({
          series: [
            { data: val[0] }
          ]
        })
        this.$refs.flowChartRef.resize()
        // this.option.series[0].data = val[0]
      },
      deep:true //true 深度监听
    }
  },
  created() {},
  mounted() {
    let _this = this
    this.$nextTick(() => {
      window.addEventListener("resize", function() {                
        _this.$refs.flowChartRef.resize()
      });
    });
  },
  methods: {}
};
</script>

<style lang="less"></style>
